<template>
  <div
    class="player-history-display"
    :class="{ clickable: playerHistory.length > 0 }"
    @click="handleClick"
  >
    <div v-if="playerHistory.length === 0" class="empty-history">暂无出牌</div>
    <div v-else class="history-items">
      <div
        v-for="record in displayHistory"
        :key="record.id"
        class="history-item"
      >
        <div v-if="record.cards.length === 0" class="pass-indicator">过牌</div>
        <div v-else class="cards-display">
          <PokerCard
            v-for="card in record.cards"
            :key="card.id"
            :card="card"
            size="tiny"
          />
        </div>
      </div>
      <div v-if="playerHistory.length > maxDisplay" class="more-indicator">
        点击查看全部 ({{ playerHistory.length }}条)
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { GameHistory } from '../types/game'
import { Card } from '../types/card'
import PokerCard from './PokerCard.vue'
import { sortCardsByGuandanRules } from '../utils/cardUtils'

interface Props {
  playerId: number
  playerName: string
  history: GameHistory[]
  trumpCard: Card | null
  maxDisplay?: number
}

interface Emits {
  (e: 'showFullHistory'): void
}

const props = withDefaults(defineProps<Props>(), {
  maxDisplay: 3,
})

const emit = defineEmits<Emits>()

// 过滤出该玩家的历史记录，并只显示最近的几条
const playerHistory = computed(() => {
  return props.history.filter(
    (record: GameHistory) => record.playerId === props.playerId
  )
})

const displayHistory = computed(() => {
  // 显示最近的N条记录，并对每条记录中的牌进行排序
  return playerHistory.value.slice(-props.maxDisplay).map((record) => ({
    ...record,
    cards: sortCardsByGuandanRules(record.cards, props.trumpCard),
  }))
})

const handleClick = () => {
  if (playerHistory.value.length > 0) {
    emit('showFullHistory')
  }
}
</script>

<style scoped>
.player-history-display {
  min-height: 40px;
  padding: var(--spacing-xs);
  background: rgba(0, 0, 0, 0.2);
  border-radius: var(--border-radius-sm);
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: var(--transition);
}

.player-history-display.clickable {
  cursor: pointer;
}

.player-history-display.clickable:hover {
  background: rgba(0, 0, 0, 0.3);
  border-color: rgba(255, 255, 255, 0.2);
  transform: scale(1.02);
}

.empty-history {
  color: rgba(255, 255, 255, 0.4);
  font-size: 11px;
  text-align: center;
  font-style: italic;
  padding: var(--spacing-xs);
}

.history-items {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.history-item {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
  padding: 2px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 3px;
}

.pass-indicator {
  color: rgba(255, 255, 255, 0.6);
  font-size: 10px;
  font-style: italic;
}

.cards-display {
  display: flex;
  gap: 2px;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

.more-indicator {
  color: rgba(255, 255, 255, 0.7);
  font-size: 10px;
  text-align: center;
  margin-top: 4px;
  padding: 2px;
  background: rgba(253, 126, 20, 0.2);
  border-radius: 3px;
  font-weight: bold;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .player-history-display {
    min-height: 30px;
    padding: 4px;
  }

  .history-item {
    min-height: 20px;
    padding: 1px;
  }

  .pass-indicator {
    font-size: 9px;
  }

  .cards-display {
    gap: 1px;
  }
}
</style>
